<!--  文件上传 - 属性面板 -->
<template>
  <div class="fileUploadAttr">
    <div class="content">
      <div class="title">
        {{ attributeset.lab }}
      </div>
      <div v-if="attributeset.data" class="list">
        <div class="lab">字段标题：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.title"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">表单宽度：</div>
          <div class="slider">
            <t-slider v-model="attributeset.data.width" size="small" />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">表单列数</div>
          <div>
            <t-radio-group
              v-model="attributeset.data.defaultWidth"
              default-value="1"
              size="small"
              @change="widthChange"
            >
              <t-radio-button value="1">一列</t-radio-button>
              <t-radio-button value="2">两列</t-radio-button>
              <t-radio-button value="3">三列</t-radio-button>
              <t-radio-button value="4">四列</t-radio-button>
            </t-radio-group>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">文件大小：</div>
          <div>
            <t-input
              v-model="attributeset.data.fileSize"
              type="number"
              size="small"
              suffix="kB"
              placeholder="请输入长度"
            />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">多选文件：</div>
          <div>
            <t-input
              v-model="attributeset.data.maxFileNum"
              type="number"
              size="small"
              style="width: 169.3px"
              placeholder="请输入长度"
            />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">文件类型：</div>
          <div>
            <t-select
              v-model="attributeset.data.fileType"
              placeholder="请选择"
              size="small"
              class="selectCont"
            >
              <t-option
                v-for="item in fileTypeOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </t-select>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">是否只读</div>
          <div><t-switch v-model="attributeset.data.isReadOnly" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">列表显示</div>
          <div><t-switch v-model="attributeset.data.listDisplay" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">列表搜索</div>
          <div><t-switch v-model="attributeset.data.searchDisplay" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">搜索类型</div>
          <div>
            <t-select v-model="attributeset.data.searchType" size="small">
              <t-option
                v-for="item in SEARCH_TYPE"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </t-select>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">显示标题</div>
          <div><t-switch v-model="attributeset.data.isShowTitle" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">隐藏组件</div>
          <div><t-switch v-model="attributeset.data.isShow" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">是否必填</div>
          <div><t-switch v-model="attributeset.data.isMust" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">默认值</div>
          <div>
            <t-upload
              :action="fileUploadUrl"
              :accept="fileTypeCange(attributeset.data.fileType)"
              :size-limit="{
                size: attributeset.data.fileSize || 1024 * 1024 * 1024,
                unit: 'KB'
              }"
              :max="Number(attributeset.data.maxFileNum) || 99"
              :before-upload="beforeUpload"
              @success="uploadSuccess"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch, onMounted, getCurrentInstance } from 'vue'
import OSS from 'ali-oss'
import { SEARCH_TYPE } from '@/constants'
import { fileTypeCange } from '@/utils/validate'

const props = defineProps({
  arrtData: Object
})

const fileUploadUrl = ref()

// 获取APP根实例
const instance = getCurrentInstance()
const instances: any = instance.appContext.app
onMounted(() => {
  if (instances.$initConfig && instances.$initConfig.uploadConf) {
    const { uploadConf } = instances.$initConfig
    fileUploadUrl.value = uploadConf.url
  } else if (instances.$initConfig && instances.$initConfig.ossConf) {
    const { ossConf } = instances.$initConfig
    initUpload(ossConf)
  }
})
// 阿里oss直传
const fileClient = ref()
const initUpload = (params) => {
  fileClient.value = new OSS(params)
}

// 使用阿里oss上传
const beforeUpload = (file) => {
  if (instances.$initConfig && !instances.$initConfig.uploadConf) {
    fileClient.value.put(file.name, file.raw).then((res) => {
      attributeset.data.defaultValue = res.url
    })
    return false
  }
}

// 文件上传成功
const uploadSuccess = (val) => {
  attributeset.data.defaultValue = val.response.data.url
  attributeset.data.defaultValueName = val.file.name
}
let attributeset = reactive({ ...props.arrtData })

const fileTypeOptions = ref([
  {
    key: 'all',
    value: '全部'
  },
  {
    key: 'img',
    value: '图片'
  },
  {
    key: 'video',
    value: '视频'
  },
  {
    key: 'audio',
    value: '音频'
  },
  {
    key: 'excel',
    value: 'excel'
  },
  {
    key: 'word',
    value: 'word'
  },
  {
    key: 'pdf',
    value: 'pdf'
  },
  {
    key: 'txt',
    value: 'txt'
  },
  {
    key: 'ppt',
    value: 'ppt'
  }
])
// 处理列的调整宽度
const widthChange = (val) => {
  switch (val) {
    case '1':
      attributeset.data.width = 100
      break
    case '2':
      attributeset.data.width = 50
      break
    case '3':
      attributeset.data.width = 33.3
      break
    case '4':
      attributeset.data.width = 25
      break
  }
}
// 接收父级的方法
const emit: Function = defineEmits(['changeAttrHandle'])
// 同步调整attributeset
watch(
  () => props.arrtData,
  (val) => {
    attributeset = { ...val }
  },
  { deep: true }
)
// 监听整个表单的输入
watch(
  () => attributeset,
  (val) => {
    emit('changeAttrHandle', val)
  },
  { deep: true }
)
</script>
<style src="../../index.less" scoped></style>
